<template>
    <div class="header">
        <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
            <div class="iconfont header-abs-back">&#xe624;</div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            详情介绍
            <router-link to ="/" tag="div">
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
        </div>
        
    </div>
    
</template>
<script>
export default{
    name:'DetailHeader',
    data () {
        return {
            showAbs:true,
            opacityStyle: {
                opacity:1,

            }
        }
         
    },
    methods: {
        handleScroll () {
           
            const top = document.documentElement.scrollTop
            if( top > 40 ){
                let opaci = top/140;
                opaci = opaci > 1 ? 1 : opaci
                this.opacityStyle = {
                    opacity : opaci
                }
                this.showAbs = false
            }else{
                this.showHeader = true
            }
            console.log(top)
            
           
        }
    },
    activated () {
        // 在钩子函数中，监听事件scroll，一旦发生滚轮事件，就执行handleScroll方法
        // 但是会有一个问题，window是全局事件，即，当离开了该页面，去往其他页面时，这个方法也一直在执行
        // 好在有一个deactivated
        window.addEventListener('scroll',this.handleScroll)
    },
    deactivated () {
        // 清除全局事件
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .header-abs
        position :absolute
        left :.2rem
        top :.2rem
        width :.8rem
        height :.8rem
        text-align :center
        line-height :.8rem
        border-radius :.4rem
        background :rgba(0,0,0,.8)
        .header-abs-back
            color :#fff
    .header-fixed
        z-index :2
        position:fixed 
        top :0
        left :0
        background:$bgColor
        height :$headerHeight
        width :100%
        text-align:center
        line-height:$headerHeight
        color:#fff
        font-size:.32rem
        .header-fixed-back
            position:absolute
            top:0
            left :.16rem
            text-align:center
            height :$headerHeight
            font-size:.4rem
            color:#fff
</style>